<template>
    <div>
		<div style="clear:both;"></div>

		<!-- 页面头部 start -->
		<div class="header w990 bc mt15">
			<div class="logo w990">
				<h2 class="fl"><a @click="$router.push('/')" href="#"><img src="~/assets/images/logo.png" alt="京西商城"></a></h2>
			</div>
		</div>
		<!-- 页面头部 end -->
		<!-- 登录主体部分start -->
		<div class="login w990 bc mt10">
			<div class="login_hd">
				<h2>用户登录</h2>
				<b></b>
			</div>
			<div class="login_bd">
				<div class="login_form fl">
					<form action="" method="post">
						<ul>
							<li>
								<label for="">用户名：</label>
								<input type="text" class="txt" v-model="user.mobile" />
							</li>
							<li>
								<label for="">密码：</label>
								<input type="password" class="txt" v-model="user.password" />
								<a href="">忘记密码?</a>
							</li>
							<li class="checkcode">
								<label for="">验证码：</label>
								<input type="text" v-model="checkcode" />
								<img src="~/assets/images/checkcode1.jpg" alt="" />
								<span>看不清？<a href="">换一张</a></span>
							</li>
							<li>
								<label for="">&nbsp;</label>
								<input type="checkbox" class="chb" /> 保存登录信息
							</li>
							<li>
								<label for="">&nbsp;</label>
								<input type="submit" value="" @click.prevent="submitLogin" class="login_btn" />
							</li>
						</ul>
					</form>

					<div class="coagent mt15">
						<dl>
							<dt>使用合作网站登录商城：</dt>
							<dd class="qq"><a href=""><span></span>QQ</a></dd>
							<dd class="weibo"><a href=""><span></span>新浪微博</a></dd>
							<dd class="yi"><a href=""><span></span>网易</a></dd>
							<dd class="renren"><a href=""><span></span>人人</a></dd>
							<dd class="qihu"><a href=""><span></span>奇虎360</a></dd>
							<dd class=""><a href=""><span></span>百度</a></dd>
							<dd class="douban"><a href=""><span></span>豆瓣</a></dd>
						</dl>
					</div>
				</div>

				<div class="guide fl">
					<h3>还不是商城用户</h3>
					<p>现在免费注册成为商城用户，便能立刻享受便宜又放心的购物乐趣，心动不如行动，赶紧加入吧!</p>

					<a href="regist.html" class="reg_btn">免费注册 >></a>
				</div>

			</div>
		</div>
		<!-- 登录主体部分end -->
    </div>
</template>

<script>
import '~/assets/style/login.css'
import userApi from '~/api/user.js'
export default {
	data(){
		return{
			user: {},
			checkcode: ''
		}
	},
	methods:{
		//提交表单，实现用户登录
		submitLogin: function () {
			//获取localStorage中购物车数据
			var cart = localStorage.getItem("cart");

			//判断购物车是否有数据
			if (cart != null) {
				cart = JSON.parse(cart);
			} else {
				cart = [];
			}

			//构造向服务器端传递的参数
			//用户名
			//密码
			//购物车数据 --- 合并购物车 （把浏览器端购物车数据合并到redis服务器）
			var userCart = {
				mobile: this.user.mobile,
				password: this.user.password,
				cart: cart
			}

			//从localStorage获取跳转地址
			var returnURL = localStorage.getItem("returnURL");

			//调用api函数
			userApi.login(userCart).then(res => {
				//判断登录状态
				if (res.data.errno == 0) {
					//登录成功
					//把登录令牌保存到localStorage
					localStorage.setItem("token", res.data.token);
					//登录成功，返回用户名，把用户名存储到localStorage
					localStorage.setItem("name", res.data.name);
					//存储用户登录手机号
					localStorage.setItem("mobile", this.user.mobile);

					//同步完成，需要删除本地磁盘购物车数据
					localStorage.removeItem("cart");

					//判断跳转地址是否为空
					if (returnURL != null) {
						//跳转地址获取成功后，删除跳转地址
						localStorage.removeItem("returnURL");
						location.href = returnURL;
					} else {
						//跳转到首页
						location.href = "/";
					}


				} else {
					//打印登录失败信息
					alert(res.data.errmsg);
				}
			})

		}
	}
}
</script>

<style>

</style>
